// 视频监控

<template>
    <f7-page class="video-list"
             ptr
             @ptr:refresh="refresh"
             infinite
             :infinite-distance="50"
             :infinite-preloader="true"
             @infinite="infinite">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>视频监控</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="house"
                         @click.native="fnToHome()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>

        <van-notice-bar background="#fff"
                        color="#345">
            <f7-icon solt="left-icon"
                     color="#3385ff"
                     f7="layers_alt_fill"></f7-icon>
            <span>{{controlData.engineeInfo.engineeName}}</span>
        </van-notice-bar>

        <!-- <div class="gcbm fff">
            <span class="tag tag-green-fill">在施项目</span>
            <div>项目编码：{{controlData.engineeInfo.engineeCode}}</div>
        </div> -->

        <div v-if="query.data.length > 0">
            <template v-if="allRole">
                <div class="videos">
                    <div v-for="(item, index) in query.data"
                         class="fff"
                         :key="index"
                         @click="fnPlay(item)">
                        <i>
                            <img v-if="item.videoUrl"
                                 :src="item.videoUrl | videoUrl" />
                            <i v-else></i>

                            <span></span>
                        </i>
                        <section>
                            <label>{{item.cameraName}}</label>
                            <span :class="{'lx': item.statusName != '在线'}">
                                <f7-icon f7="wifi"></f7-icon>
                            </span>
                        </section>
                    </div>
                </div>
            </template>
            <template v-else>
                <div v-for="item in list"
                     class="video-div"
                     :key="item.vsid">
                    <div class="top">
                        <span>{{item.cameraName}}</span>
                        <span class="more"
                              @click="gotoMore(item)">更多</span>
                    </div>
                    <ul class="bottom">
                        <li v-for="(childItem,childIndex) in item.videos"
                            :key="childIndex">
                            <img v-if="item.value"
                                 :src="item.value | videoUrl"
                                 onerror="javascript:this.src='static/img/center/man-png.png'" />
                            <span>{{childItem.name}}</span>
                        </li>
                    </ul>
                </div>
            </template>
        </div>

        <van-empty v-else
                   description="暂无数据" />
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"
import Config from '@/libs/config.js'

export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: '/video/camera/getListModel',
            query: '/video/camera/query'
        }
    }
    onInit () {
        // this.setSearch("engineeId", this.$f7route.query.engineeId, "list")
        // this.context.initParams = { length: 999 }
    }
    onBeforeQuery (type, conditions, params) {
        if (type == 'list') {
            params.length = 999
            params.query.engineeId = this.$f7route.query.engineeId
            params.order = {
                field: 'cameraName',
                dir: 'asc'
            }
        }
    }
    mixin () {
        return {
            data () {
                return {
                    controlData: {
                        // 项目信息
                        engineeInfo: {}
                    },
                    list: [
                        { vsid: 1, cameraName: '建筑材料堆放区', videos: [{ name: '2022-11-02', value: null }, { name: '2022-11-02', value: null }] }
                    ]
                }
            },
            methods: {
                // 播放
                fnPlay (item) {
                    if (!this.$framework.account.hasPermission('project:enginee:video')) {
                        this.$f7.dialog.toast(`暂无权限查看！`);
                        return
                    }
                    this.$util.request('/video/camera/getPreviewURLs', {
                        cameraIndexCode: item.cameraIndexCode
                    }, 'post').then(res => {
                        if (res.status == 200 && res.data.success) {
                            if (window.plus.os.name.toLowerCase() == "ios") {
                                window.plus.hatom.preview(res.data.parameters.url);
                            } else {
                                window.plus.hatom.previewRetry({
                                    cameraId: item.cameraIndexCode,
                                    url: res.data.parameters.url,
                                    title: item.cameraName
                                })
                            }
                        } else {
                            this.$f7.dialog.alert("获取预览地址失败");
                        }
                    })
                },
                // 点击更多
                gotoMore (item) {
                    this.$f7router.navigate(`/business/construction/enginee/videoMonitoring/moreList?cameraName=${item.cameraName}&engineeId=${this.$f7route.query.engineeId}`)
                },
            },
            computed: {
                allRole () {
                    // // 角色分配路
                    // let role=['SUPE_MANAGER','DISCIPLINE_SUPERVISOR','CONS_MANAGER','CONSTRUCTION_TEC_MANAGER','CONSTRUCTION_SAFETY_SPECIALIST']
                    // // 因为hasRole进行了把数据小写，所以这边也需要对应的小写
                    // role=role.map(item=>{
                    //     item=item.toLowerCase()
                    //     return item
                    // })
                    // // 过滤出底部路由
                    // if(this.$framework.account.hasRole(role)){
                    //     return false
                    // }
                    return true
                },
            },
            filters: {
                videoUrl: function (val) {
                    return `${Config.api.download}?attachmentId=${val}`
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.video-list {
    .gcbm {
        display: flex;
        padding: 10px;

        > span {
            flex-shrink: 0;
            margin-right: 4px;
        }
    }

    .videos {
        padding: 10px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

        > div {
            display: flex;
            flex-direction: column;
            border-radius: 6px;
            overflow: hidden;

            > i {
                height: 120px;
                background-color: #b4b9c4;
                background: #99cdff;
                display: flex;
                position: relative;

                img {
                    flex: 1;
                    object-fit: cover;
                    width: 100%;
                }

                > span {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    background: url("../../../../../assets/img/video/bg_2.png")
                        no-repeat center / cover;
                    z-index: 9;
                }

                > i {
                    position: absolute;
                    width: 60px;
                    height: 20px;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    background: url("../../../../../assets/img/video/bg_1.png")
                        no-repeat center / cover;
                    z-index: 5;
                }
            }

            section {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                padding: 10px;

                label {
                    color: #666;
                }

                > span {
                    width: 24px;
                    height: 24px;
                    border-radius: 100%;
                    background-color: #d7f6f0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-shrink: 0;

                    .f7-icons {
                        font-size: 14px;
                        color: #55b76c;
                    }

                    &.lx {
                        background-color: grey;

                        .f7-icons {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
    .video-div {
        background: #fff;
        margin-top: 10px;
        padding: 10px;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            font-size: 15px;
            color: #243357;
            border-bottom: 1px solid #e9edf7;
            .more {
                color: #3b7ffa;
            }
        }
        .bottom {
            display: flex;
            padding-top: 15px;
            li {
                width: 31%;
                margin-right: 3%;
                display: flex;
                flex-direction: column;
                color: #929497;
                font-size: 12px;
                &:last-child {
                    margin-right: 0;
                }
                span {
                    margin-top: 5px;
                }
                img {
                    width: 100%;
                    height: 70px;
                    object-fit: fill;
                }
            }
        }
    }
}
</style>
